<template>
	<view>
		<view>
			<view class="box-bg">
				<uni-nav-bar height="5vh" title="在线办卡" />
			</view>
		</view>
		<view class="card">
			<image :src="cardDetail.image"></image>
			<text class="card-name">{{cardDetail.name}}</text>
			<text class="card-type">{{cardDetail.type}}</text>
			<text class="card-price">¥{{cardDetail.price}}</text>
		</view>
		<view>
			<uni-list-item title="卡片id" :rightText="cardDetail.id" />
			<uni-list-item title="卡片名称" :rightText="cardDetail.name" />
			<uni-list-item title="卡片价格" :rightText="cardDetail.price" />
			<uni-list-item title="有效天数" :rightText="cardDetail.day" />
			<uni-list-item title="是否在售" :rightText="cardDetail.status" />
			<uni-list-item title="卡片描述" :rightText="cardDetail.description" />
		</view>
		<view class="goods-carts" v-if="status==''">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<view class="classList">
			<view class="classList-top">
				支持课程
			</view>
			<view v-for="item in classList" class="classList-item">
				•{{item}}
			</view>
		</view>
		<view>
			<uni-popup ref="popup" background-color="#fff" >
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<button @click="pageToPay()">微信支付</button>
					<button @click="showAdmin()">联系管理员</button>
				</view>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="adminList" background-color="#fff" >
				<view class="popup-content" v-for="item in adminList"  
				:class="{ 'popup-height': type === 'left' || type === 'right' }">
					
					<button @click="call(item.phone)">{{item.name}}{{item.phone}}</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { getAdminList } from '../../api/admin';
import {
		getCardById
	} from '../../api/card';
	import {
		getClassByCardTags
	} from '../../api/class';
	import {
		placeOrder
	} from '../../api/orders';
	import {
		chooseCard,
		getSelectedCard
	} from '../../api/user';
	import {
		commonDownload
	} from '../../common/download';
	import {
		baseUrl
	} from '../../config';
	import cardDetailVue from './cardDetail.vue';
	export default {
		data() {
			return {
				cardDetail: {},
				options: [{
					icon: 'chat',
					text: '咨询'
				}],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				classList: [],
				status: "",
				adminList:[]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				var userId = uni.getStorageSync("auth")
				var cardId = this.cardDetail.id
				getSelectedCard(userId, cardId).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.$refs.popup.open('bottom')
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
					}
				})
			},
			pageToPay(){
				uni.navigateTo({
					url:"/pages/pay/pay"
				})
			},
			showAdmin(){
				getAdminList().then(res=>{
					this.adminList=res.data.data
				})
				this.$refs.adminList.open('bottom')
				
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		},
		onLoad(options) {
			this.status = options.status
			console.log(this.status);
			getCardById(options.id).then(res => {
				console.log(res);
				if (res.data.data != null) {
					this.cardDetail = res.data.data
					res.data.data.image = baseUrl + "/common/download?name=" + res.data.data.image
					if (res.data.data.type == "期限卡") {
						res.data.data.type = "期"
					} else if (res.data.data.type == "储值卡") {
						res.data.data.type = "储"
					} else if (res.data.data.type == "次卡") {
						res.data.data.type = "次"
					}
					if (res.data.data.status == 1) {
						res.data.data.status = "在售"
					} else if (res.data.data.status == 0) {
						res.data.data.status = "停售"
					}
					if (res.data.data.tags != null) {
						getClassByCardTags(res.data.data.tags).then(res => {
							this.classList = res.data.data
						})
					}
				}
			})
		}
	}
</script>

<style>
	.card {
		width: 80%;
		background-size: 100%;
		margin: auto;
		margin-top: 2vh;
		position: relative;
		height: 25vh
	}

	.card image {
		height: 23vh;
		width: 100%;
		border-radius: 2vh;
		z-index: 1;
		position: absolute;

	}

	.card text {
		position: absolute;
		z-index: 2;
	}

	.card-name {
		font-size: 2.5vh;
		font-weight: bold;
		color: seagreen;
		position: absolute;
		top: 3.5vh;
		left: 2.5vh;
		font-family: "";
	}

	.card-type {
		font-size: 3vh;
		position: absolute;
		right: 2vh;
		top: 2.5vh;
		color: #FCF7F3;
	}

	.card-price {
		font-size: 2vh;
		color: ghostwhite;
		position: absolute;
		top: 17vh;
		font-weight: bold;
		left: 3vh;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.classList {
		background-color: white;
		margin-top: 2vh;
		padding: 2vh;
	}

	.classList-top {
		font-size: 3vh;
		font-weight: bold;
	}

	.classList-item {
		background-color: white;
		margin: 1vh 0;
		height: 2vh;
		line-height: 2vh;
		padding: 1vh;
		list-style: circle;
	}
</style>